<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #app {
        width: 600px;
        margin: 10px auto;
      }

      .tb {
        border-collapse: collapse;
        width: 100%;
      }

      .tb th {
        background-color: #0094ff;
        color: white;
      }

      .tb td,
      .tb th {
        padding: 5px;
        border: 1px solid black;
        text-align: center;
      }

      .tb img {
        width: 100px;
        height: 100px;
      }

      .add {
        padding: 5px;
        border: 1px solid black;
        margin-bottom: 10px;
      }

      button:disabled {
        background-color: gray;
      }
    </style>
  </head>
  <body>
    <!-- 
      搜索功能分为两种：
        1. 前端搜索
          接口数据全部拿到了，通过 filter 方法来做过滤
        2. 后端搜索
          调用后端的接口，传递搜索关键字，从新获取一份新数据

     -->

    <div id="app">
      <div class="add">
        <input
          type="text"
          placeholder="请输入商品的名称 - 前端计算属性搜索"
          v-model.trim="keyword"
        />
      </div>

      <div class="add">
        <input
          type="text"
          placeholder="请输入商品的名称 - 后端接口搜索"
          v-model.trim="query"
          @keyup.enter="fetchData"
        />
        <button :disabled="isSearch" @click="fetchData">搜索</button>
      </div>

      <table class="tb">
        <thead>
          <tr>
            <th>
              <input type="checkbox" v-model="isAll" />
            </th>
            <th>产品图片</th>
            <th>编号</th>
            <th>品牌名称</th>
            <th>价格</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
        </thead>

        <tbody>
          <tr v-for="item in searchResult" :key="item.id">
            <td>
              <input type="checkbox" :value="item.id" v-model="checkedIds" />
            </td>
            <td>
              <img :src="item.imgSrc" alt="" />
            </td>
            <td>{{item.id}}</td>
            <td>{{item.productName}}</td>
            <td>{{item.price}}</td>
            <td>
              <button
                type="button"
                @click.prevent="changeCount(item.id, item.count - 1, item)"
              >
                -
              </button>
              {{item.count}}
              <button
                type="button"
                @click.prevent="changeCount(item.id, item.count + 1, item)"
              >
                +
              </button>
            </td>
            <td>
              <button @click="handleDel(item.id)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>

      <p>当前勾选商品的总价：{{totalPrice}}</p>
    </div>

    <script src="../lib/vue.js"></script>
    <script src="../lib/axios.min.js"></script>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          list: [], // 用于存放购物车数据
          checkedIds: [], // 用于存放勾选的商品Id
          keyword: "", // 搜索关键字
          query: "", // 搜索关键字
          isSearch: false, // 表示当前是否正在搜索中
        },
        computed: {
          // isAll() {
          //   return this.list.length === this.checkedIds.length;
          // },
          isAll: {
            get() {
              return this.list.length === this.checkedIds.length;
            },
            set(value) {
              console.log("value", value);
              // 判断 value
              if (value) {
                // true， 要全选，将 list 中每一项的Id写入到checkedIds 中
                this.checkedIds = this.list.map((item) => item.id);
              } else {
                // false, 取消全选，将 checkedIds 赋值为 []
                this.checkedIds = [];
              }
            },
          },

          // 总价
          //    依赖是 list 与 checkedIds
          totalPrice() {
            // 1. 先使用 filter 对 list 进行过滤，得到勾选的商品数组
            // 2. 对第一步得到的数据在 操作 reduce
            return this.list
              .filter((item) => this.checkedIds.includes(item.id))
              .reduce((result, item) => {
                return result + item.price * item.count;
              }, 0);
          },

          // 搜索结果
          searchResult() {
            return this.list.filter((item) =>
              item.productName.includes(this.keyword)
            );
          },
        },
        watch: {
          query() {
            this.fetchData();

            // 注意使用防抖思想来处理频繁请求的发送。
            // clearTimeout(this.timer);

            // this.timer = setTimeout(() => {
            //   this.fetchData();
            // }, 500);
          },
        },
        methods: {
          // 请求数据
          fetchData() {
            // if (this.isSearch) return;

            this.isSearch = true;
            axios
              .get("http://localhost:3000/carts", {
                // query 参数
                params: {
                  productName_like: this.query,
                },
              })
              .then((response) => {
                console.log("response", response);

                // 将 response.data 赋值给 this.list
                this.list = response.data;
              })
              .finally(() => {
                // 不管成功还是失败，都要将 isSearch 给重置为 false，否则搜索就无效了。
                this.isSearch = false;
              });
          },

          // 搜索
          handleSearch() {
            axios
              .get("http://localhost:3000/carts", {
                // query 参数
                params: {
                  productName_like: this.query,
                },
              })
              .then(({ data }) => {
                this.list = data;
              });
          },

          // changeCount
          changeCount(id, count, data) {
            // TODO. 自动刷新的问题。是 live-server 的问题

            // 如果当前 count 是要修改为 0，不生效，或者直接走删除的逻辑
            if (count === 0) {
              this.handleDel(id);
              return;
            }

            axios
              .put("http://localhost:3000/carts/" + id, {
                ...data,
                count: count,
              })
              .then((response) => {
                // 方案1. 手动修改 list 数据中相应的数据
                // 方案2. 重新调用一下 fetchData
                this.fetchData();
              });
          },

          handleDel(id) {
            axios
              .delete("http://localhost:3000/carts/" + id)
              .then((response) => {
                console.log("删除成功");
                // 方案1. 手动修改 list 数据中相应的数据
                this.list = this.list.filter((item) => item.id !== id);
                this.checkedIds = this.checkedIds.filter((item) => item !== id);
                // 方案2. 重新调用一下 fetchData
              });
          },
        },
      });

      // 默认调用一次
      vm.fetchData();
    </script>
  </body>
</html>
